<template>
  <el-dialog v-model="store.switchStoreFormVisible" title="切换门店" width="40%" center>
    <el-table :data="store.storeList.filter((v) => v.storeId !== store.getLocalCurrentStoreMain().storeId)" style="width: 100%">
      <el-table-column label="门店ID" width="180">
        <template #default="scope">
          <div style="display: flex; align-items: center">
            <span style="margin-left: 10px">{{ scope.row.storeId }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="门店信息" width="180">
        <template #default="scope">
          <span>{{ scope.row.name }}</span>
          <el-popover effect="light" trigger="hover" placement="top" width="auto">
            <template #default>
              <div>电话: {{ scope.row.tel }}</div>
              <div>地址: {{ scope.row.address }}</div>
            </template>
            <template #reference>
              <el-icon style="margin-left: 15%;color: #808080"><MoreFilled /></el-icon>
            </template>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column label="">
        <template #default="scope">
          <el-popconfirm
              confirm-button-text="是"
              cancel-button-text="否"
              icon-color="#626AEF"
              title="确定切换门店吗？"
              @confirm="confirmEvent(scope.$index, scope.row)"
          >
            <template #reference>
              <el-button size="small" style="margin-left: 40%">
                切换
              </el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog v-model="switchStoreMailCode" title="切换门店" width="30%" center>
      <el-form>
        <el-form-item label="验证码" label-width="100px">
          <el-col :span="12"><el-input v-model="mailCode" type="text" style="max-width: 150px" /></el-col>
          <el-col :span="12">
            <el-button v-if="isSend" class="cu-btn bg-green shadow" style="margin-left: 5%;width: 40%" disabled>{{ countdownTime }}s</el-button>
            <el-button v-else type="success" style="margin-left: 5%;width: 40%" @click="sendMail()"><el-text style="color: white" size="small">发送验证码</el-text></el-button>
          </el-col>
        </el-form-item>
      </el-form>
      <template #footer>
      <span class="dialog-footer">
        <el-button @click="switchStoreMailCode = false">取消</el-button>
        <el-button type="primary" @click="submit()">
          确认
        </el-button>
      </span>
      </template>
    </el-dialog>
  </el-dialog>

</template>

<script setup>
import {store} from "@/store";
import {inject, ref} from "vue";
import {
  MoreFilled
} from '@element-plus/icons-vue'
import request from "@/utils/request";
import {message} from "ant-design-vue";
import router from "@/router";
import {ElMessage} from "element-plus";
const mailCode = ref("")
let selectStoreMain={}
let switchStoreMailCode=ref(false)
const isSend=ref(false)
const countdownTime=ref(0)
const iinject=inject('reload')

const confirmEvent = (index,data) => {
  selectStoreMain=data
  sendMail()
  switchStoreMailCode.value=true
}

const submit = () => {
  let userMainWithCode=store.getLocalUserMain()
  userMainWithCode.mailCode=mailCode.value
  request.post("/store/loginUser",userMainWithCode).then(res=>{
    if (res.code!==8){
      store.resetLocalGoodsInfo(selectStoreMain)
      switchStoreMailCode.value=false
      store.switchStoreFormVisible=false
      iinject()
    }else
      ElMessage({
        message: '验证码有误',
        type: 'error',
      })
  })
}

const sendMail = () => {
    request.post("/store/sendCommonMail", store.getLocalUserMain()).then(res => {
      if (res.code === 200) {
        isSend.value = true
        countdownTime.value = 60
        ElMessage({
          message: '已向绑定邮箱发送验证码',
          type: 'success',
        })
        let timer = setInterval(() => {
          countdownTime.value--;
          if (countdownTime.value < 1) {
            clearInterval(timer)
            countdownTime.value = 0
            isSend.value = false
          }
        }, 1000)
      } else {
        ElMessage({
          message: '发送失败，请重试',
          type:'error',
        })
      }
    })
}
</script>

<style scoped>
.el-input {
  width: 200px;
}
</style>